<!--
* @description:新增操作员
* @fileName: TheNewOperator
* @author:孟帅龙
* @date:2021-1-12
* @后台人员:孟帅龙
-->
<template>
  <div>
    <!-- 新增操作员 -->
    <div class="xzczy">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- <el-form-item label="编号：" prop="OperatorNumber">
          <el-input
            v-model="ruleForm.OperatorNumber"
            placeholder="编号一般由czy+4位数组成，如czy0001"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="公司名称：" prop="CpmpanyId">
          <el-select
            v-model="ruleForm.CpmpanyId"
            placeholder="请选择所在公司名称"
          >
            <el-option
              v-for="item in company"
              :key="item.value"
              :label="item.CompanyName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门：" prop="DeptId">
          <el-select v-model="ruleForm.DeptId" placeholder="请选择所在部门">
            <el-option
              v-for="item in dept"
              :key="item.value"
              :label="item.DeptName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色：" prop="RoleId">
          <el-select v-model="ruleForm.RoleId" placeholder="请选择角色">
            <el-option
              v-for="item in role"
              :key="item.value"
              :label="item.RoleName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名：" prop="OperatorName">
          <el-input
            v-model="ruleForm.OperatorName"
            placeholder="请输入操作员姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="OperatorPhone">
          <el-input
            v-model="ruleForm.OperatorPhone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>

        <el-form-item label="账号：" prop="Account">
          <el-input
            v-model="ruleForm.Account"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="Password">
          <el-input
            type="password"
            v-model="ruleForm.Password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="AffirmPassword">
          <el-input
            type="password"
            v-model="ruleForm.AffirmPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.AffirmPassword !== "") {
          this.$refs.ruleForm.validateField("AffirmPassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.Password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      //公司
      company: [],
      //部门
      dept: [],
      //角色
      role: [],
      ruleForm: {
        // OperatorNumber: "",
        OperatorName: "",
        CpmpanyId: "",
        OperatorPhone: "",
        Account: "",
        Password: "",
        AffirmPassword: "",
        DeptId: "",
        RoleId: "",
      },
      rules: {
        // OperatorNumber: [
        //   { required: true, message: "请输入编号", trigger: "blur" },
        //   { min: 7, max: 7, message: "长度必须为7个字符字符", trigger: "blur" },
        // ],
        CpmpanyId: [
          { required: true, message: "请选择公司名称", trigger: "change" },
        ],
        OperatorName: [
          { required: true, message: "请输入操作员姓名", trigger: "change" },
        ],
        OperatorPhone: [
          { required: true, message: "请输入手机号", trigger: "change" },
        ],
        CreateTime: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        Account: [{ required: true, message: "请输入账号", trigger: "change" }],
        Password: [{ validator: validatePass, trigger: "blur" }],
        AffirmPassword: [{ validator: validatePass2, trigger: "blur" }],
        DeptId: [{ required: true, message: "请选择部门", trigger: "change" }],
        RoleId: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
    };
  },
  methods: {
    goBack() {
      this.$router.push("/OperatorManagement");
    },
    //添加
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var P = /^1[3-9]\d{9}$/;
          if (!P.test(this.ruleForm.OperatorPhone)) {
            this.$message.error("手机号格式不正确");
            return;
          }
          this.$axios
            .post(
              "https://localhost:44399/api/app/operator/add-operator",
              this.ruleForm
            )
            .then((res) => {
              if (res.data > 0) {
                this.$message.success("添加成功");
                this.$router.push("/OperatorManagement");
              } else {
                this.$message.error("添加失败");
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //公司显示
    loadCompany() {
      this.$axios
        .get("https://localhost:44399/api/app/car/show-company")
        .then((res) => {
          this.company = res.data;
        });
    },
    //部门显示
    loadDept() {
      this.$axios
        .get("https://localhost:44399/api/app/operator/department")
        .then((res) => {
          this.dept = res.data;
        });
    },
    //角色显示
    loadRole() {
      this.$axios
        .get("https://localhost:44399/api/app/operator/role")
        .then((res) => {
          this.role = res.data;
        });
    },
  },
  created() {
    this.loadCompany();
    this.loadDept();
    this.loadRole();
  },
};
</script>

<style>
.xzczy {
  width: 500px;
}
</style>